<template>
  <div>
    <div style="margin-left: 80px;padding-top: 20px">
      <el-tag @click="changeData('day')" :effect="dayEffect">今日24小时访问数据dd</el-tag>
      <el-tag @click="changeData('oneWeek')" :effect="oneWeekEffect">7天访问数据</el-tag>
      <el-tag @click="changeData('twoWeek')" :effect="twoWeekEffect">14天访问数据</el-tag>
      <el-tag @click="changeData('oneMonth')" :effect="oneMonthEffect">30天访问数据</el-tag>
    </div>
    <div style="height:500px;width:1200px;" ref="chartLine">
    </div>
    <div style="height:500px;width:1200px;" ref="ipChartLine">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        params: {
          chartType: 'oneMonth',
          channelId: this.$route.query.id
        },
        dayEffect: 'dark',
        oneWeekEffect: 'light',
        twoWeekEffect: 'light',
        oneMonthEffect: 'light',
      }
    },
    created() {
    },
    methods: {
      // 获取折线图
      getLine() {
        axios.post(this.$api.getChannelChartData, this.params).then(res => {
          console.log(res)
          let result = res.body;
          let xData = [];
          let yData = [];
          for (let i in result) {
            let chart = result[i];
            xData.push(chart.browseTime);
            yData.push(chart.browseNum);
          }
          let myChart = echarts.init(this.$refs.chartLine);
          myChart.setOption({
            color: ["#6284d3"],
            tooltip: {
              trigger: "axis",
              formatter: "时间 : {b}<br/>访问量 : {c}次",
              axisPointer: {
                type: "line"
              }
            },
            grid: {
              left: "5%",
              right: "2%",
              bottom: "14%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                name: "日期",
                data: xData,
                boundaryGap: false,
                axisTick: {
                  alignWithLabel: true
                },
                nameGap: 2
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "访问次数（次）"
              }
            ],
            series: [
              {
                name: "柜子使用量",
                //类型为折线图
                type: "line",
                //折线样式
                lineStyle: {
                  normal: {
                    //宽度
                    width: 3,
                    //阴影颜色
                    shadowColor: "rgba(0,0,0,0.1)",
                    // 阴影的模糊范围
                    shadowBlur: 10,
                    // 阴影的纵向位移量
                    shadowOffsetY: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 折线范围内的背景色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#E7F1F5"
                      },
                      {
                        offset: 1,
                        color: "#E7F1F5"
                      }
                    ])
                  }
                },
                data: yData
              }
            ]
          });
        }).catch(err => {
          this.loading = false;
        });
      },
      changeData(chartType) {
        this.params.chartType = chartType
        if (chartType == 'day') {
          this.dayEffect = 'dark';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'oneWeek') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'dark';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'twoWeek') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'dark';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'oneMonth') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'dark';
        }
        this.getLine();
        this.getIpLine();
      },
      // 获取折线图
      getIpLine() {
        axios.post(this.$api.getIpChannelChartData, this.params).then(res => {
          console.log(res)
          let result = res.body;
          let xData = [];
          let yData = [];
          for (let i in result) {
            let chart = result[i];
            xData.push(chart.browseTime);
            yData.push(chart.browseNum);
          }
          let myChart = echarts.init(this.$refs.ipChartLine);
          myChart.setOption({
            color: ["#6284d3"],
            tooltip: {
              trigger: "axis",
              formatter: "时间 : {b}<br/>ip数量 : {c}个",
              axisPointer: {
                type: "line"
              }
            },
            grid: {
              left: "5%",
              right: "2%",
              bottom: "14%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                name: "日期",
                data: xData,
                boundaryGap: false,
                axisTick: {
                  alignWithLabel: true
                },
                nameGap: 2
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "ip数"
              }
            ],
            series: [
              {
                name: "柜子使用量",
                //类型为折线图
                type: "line",
                //折线样式
                lineStyle: {
                  normal: {
                    //宽度
                    width: 3,
                    //阴影颜色
                    shadowColor: "rgba(0,0,0,0.1)",
                    // 阴影的模糊范围
                    shadowBlur: 10,
                    // 阴影的纵向位移量
                    shadowOffsetY: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 折线范围内的背景色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#E7F1F5"
                      },
                      {
                        offset: 1,
                        color: "#E7F1F5"
                      }
                    ])
                  }
                },
                data: yData
              }
            ]
          });
        }).catch(err => {
          this.loading = false;
        });
      },
    },
    mounted() {
      this.getLine();
      this.getIpLine();
    }
  };
</script>


<style lang="scss" scoped>

</style>
